<template>
  <view class="login-container">
    <view class="login-header">
      <text class="login-title">IoT 用户登录测试</text>
    </view>

    <view class="login-form">
      <view class="form-item">
        <text class="form-label">用户名</text>
        <input 
          v-model="loginForm.username" 
          placeholder="请输入用户名"
          class="form-input"
        />
      </view>

      <view class="form-item">
        <text class="form-label">密码</text>
        <input 
          v-model="loginForm.password" 
          placeholder="请输入密码"
          type="password"
          class="form-input"
        />
      </view>

      <button 
        class="login-btn" 
        @click="handleLogin"
        :loading="logging"
        :disabled="!loginForm.username || !loginForm.password"
      >
        {{ logging ? '登录中...' : '登录' }}
      </button>
    </view>

    <!-- 测试结果 -->
    <view class="test-result" v-if="loginResult">
      <view class="result-title">登录结果</view>
      <view class="result-content">
        <view class="result-item">
          <text class="result-label">状态:</text>
          <text class="result-value" :class="loginResult.success ? 'success' : 'error'">
            {{ loginResult.success ? '成功' : '失败' }}
          </text>
        </view>
        <view class="result-item" v-if="loginResult.success">
          <text class="result-label">用户ID:</text>
          <text class="result-value">{{ loginResult.data.id }}</text>
        </view>
        <view class="result-item" v-if="loginResult.success">
          <text class="result-label">用户名:</text>
          <text class="result-value">{{ loginResult.data.username }}</text>
        </view>
        <view class="result-item" v-if="loginResult.success">
          <text class="result-label">Token:</text>
          <text class="result-value token">{{ loginResult.data.token }}</text>
        </view>
        <view class="result-item" v-if="!loginResult.success">
          <text class="result-label">错误信息:</text>
          <text class="result-value error">{{ loginResult.message }}</text>
        </view>
      </view>
    </view>

    <!-- 预设用户信息 -->
    <view class="preset-users">
      <view class="preset-title">测试用户信息</view>
      <view class="preset-item">
        <text class="preset-label">用户名:</text>
        <text class="preset-value">testuser</text>
      </view>
      <view class="preset-item">
        <text class="preset-label">密码:</text>
        <text class="preset-value">admin123</text>
      </view>
      <button class="preset-btn" @click="fillTestUser">填入测试用户</button>
    </view>

    <!-- API信息 -->
    <view class="api-info">
      <view class="api-title">API 信息</view>
      <view class="api-item">
        <text class="api-label">接口地址:</text>
        <text class="api-value">/app-api/iot/user/login</text>
      </view>
      <view class="api-item">
        <text class="api-label">请求方法:</text>
        <text class="api-value">POST</text>
      </view>
      <view class="api-item">
        <text class="api-label">是否需要Token:</text>
        <text class="api-value">否</text>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'IotLoginTest',
  data() {
    return {
      logging: false,
      loginForm: {
        username: '',
        password: ''
      },
      loginResult: null
    }
  },
  methods: {
    // 处理登录
    async handleLogin() {
      if (!this.loginForm.username || !this.loginForm.password) {
        uni.showToast({
          title: '请填写用户名和密码',
          icon: 'error'
        })
        return
      }

      try {
        this.logging = true
        this.loginResult = null

        console.log('开始IoT用户登录测试...')
        console.log('登录参数:', this.loginForm)

        const response = await request({
          url: '/app-api/iot/user/login',
          method: 'POST',
          data: this.loginForm,
          isToken: false // 登录接口不需要token
        })

        console.log('登录响应:', response)

        if (response.code === 200) {
          this.loginResult = {
            success: true,
            data: response.data,
            message: '登录成功'
          }

          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })

          // 可以将token保存到本地存储
          if (response.data.token) {
            uni.setStorageSync('iot_token', response.data.token)
            uni.setStorageSync('iot_user', response.data)
          }

        } else {
          this.loginResult = {
            success: false,
            message: response.msg || '登录失败'
          }
        }

      } catch (error) {
        console.error('登录异常:', error)
        this.loginResult = {
          success: false,
          message: error.message || '网络异常'
        }

        uni.showToast({
          title: '登录失败',
          icon: 'error'
        })
      } finally {
        this.logging = false
      }
    },

    // 填入测试用户
    fillTestUser() {
      this.loginForm = {
        username: 'testuser',
        password: 'admin123'
      }
    }
  }
}
</script>

<style scoped>
.login-container {
  padding: 40rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.login-header {
  text-align: center;
  margin-bottom: 60rpx;
}

.login-title {
  font-size: 48rpx;
  font-weight: 600;
  color: #333;
}

.login-form {
  background-color: white;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 32rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 24rpx;
  border: 1rpx solid #e9ecef;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.login-btn {
  width: 100%;
  padding: 28rpx;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-weight: 500;
}

.login-btn:disabled {
  background-color: #c0c4cc;
}

.test-result {
  background-color: white;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.result-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
}

.result-item {
  display: flex;
  margin-bottom: 16rpx;
  align-items: flex-start;
}

.result-label {
  font-size: 28rpx;
  color: #666;
  width: 120rpx;
  flex-shrink: 0;
}

.result-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  word-break: break-all;
}

.result-value.success {
  color: #28a745;
  font-weight: 500;
}

.result-value.error {
  color: #dc3545;
}

.result-value.token {
  font-family: monospace;
  font-size: 24rpx;
  background-color: #f8f9fa;
  padding: 8rpx;
  border-radius: 4rpx;
}

.preset-users,
.api-info {
  background-color: white;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.preset-title,
.api-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
}

.preset-item,
.api-item {
  display: flex;
  margin-bottom: 16rpx;
}

.preset-label,
.api-label {
  font-size: 28rpx;
  color: #666;
  width: 120rpx;
  flex-shrink: 0;
}

.preset-value,
.api-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.preset-btn {
  width: 100%;
  padding: 20rpx;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  margin-top: 16rpx;
}
</style>
